<template>
  <el-form label-position="top" style="margin-top: 20px">
    <el-form-item label="八、项目研究人员组织" />
    <el-form-item label="课题负责人" />
    <vxe-table
      border
      show-overflow
      :data="leader"
      :column-config="{ resizable: true }"
      :edit-config="{ trigger: 'click', mode: 'row' }"
    >
      >
      <vxe-column
        field="userId"
        title="姓名"
        :edit-render="{ autofocus: '.vxe-input--inner' }"
      >
        <!-- <template #default="{ row }">{{ row.name }}</template> -->
        <template #default="{ row }">
          <vxe-select v-model="row.userId" transfer @change="leaderChange">
            <vxe-option
              v-for="item in users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </vxe-select>
        </template>
        <template #edit="{ row }">
          <vxe-select v-model="row.userId" transfer @change="leaderChange">
            <vxe-option
              v-for="item in users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column field="unitDepartment" title="单位/部门" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.unitDepartment" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="age" title="年龄" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.age" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="titlePosition" title="职称/职务" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.titlePosition" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="specialty" title="从事专业" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.specialty" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="phone" title="联系电话" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.phone" placeholder="请输入" />
        </template>
      </vxe-column>
    </vxe-table>
    <el-form-item label="项目主要研究成员" />
    <vxe-table
      border
      show-overflow
      :data="members"
      :column-config="{ resizable: true }"
      :edit-config="{ trigger: 'click', mode: 'row' }"
    >
      >
      <vxe-column
        field="userId"
        title="姓名"
        :edit-render="{ autofocus: '.vxe-input--inner' }"
      >
        <!-- <template #default="{ row }">{{ row.name }}</template> -->
        <template #default="{ row, rowIndex }">
          <vxe-select
            v-model="row.userId"
            transfer
            @change="memberChange($event, rowIndex)"
          >
            <vxe-option
              v-for="item in users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </vxe-select>
        </template>
        <template #edit="{ row, rowIndex }">
          <vxe-select
            v-model="row.userId"
            transfer
            @change="memberChange($event, rowIndex)"
          >
            <vxe-option
              v-for="item in users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column field="unitDepartment" title="单位/部门" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.unitDepartment" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="age" title="年龄" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.age" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="titlePosition" title="职称/职务" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.titlePosition" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="specialty" title="从事专业" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.specialty" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="phone" title="联系电话" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.phone" placeholder="请输入" />
        </template>
      </vxe-column>
    </vxe-table>
    <el-button
      style="margin-top: 20px"
      type="primary"
      :icon="Plus"
      @click="handleAdd"
    >
      增加成员
    </el-button>
  </el-form>
</template>

<script setup>
  import { Plus } from '@element-plus/icons-vue'
  import { getAllUser, getUser } from '@/api/system/user'

  const $baseMessage = inject('$baseMessage')

  const users = ref([])

  const leader = ref([
    {
      userId: '',
      name: '',
      unitDepartment: '',
      age: '',
      titlePosition: '',
      specialty: '',
      phone: '',
      type: 1,
    },
  ])

  const members = ref([
    {
      userId: '',
      name: '',
      unitDepartment: '',
      age: '',
      titlePosition: '',
      specialty: '',
      phone: '',
      type: 2,
    },
  ])

  const getUserList = () => {
    getAllUser().then((res) => {
      if (res.code == 0 || res.code == 200) {
        users.value = res.data || []
      }
    })
  }

  const leaderChange = (select) => {
    getUser(select.value).then((res) => {
      if (res.code == 0 || res.code == 200) {
        const userInfo = res.data
        leader.value = [
          {
            userId: userInfo.id,
            name: userInfo.nickname,
            unitDepartment: `${userInfo.deptName || ''}`,
            age: '',
            titlePosition: '职称/职务',
            specialty: '从事专业',
            phone: userInfo.mobile,
            type: 2,
          },
        ]
      }
    })
  }

  const memberChange = (select, rowIndex) => {
    getUser(select.value).then((res) => {
      if (res.code == 0 || res.code == 200) {
        const userInfo = res.data
        const membersData = [...members.value]
        membersData[rowIndex] = {
          userId: userInfo.id,
          name: userInfo.nickname,
          unitDepartment: `${userInfo.deptName || ''}`,
          age: '',
          titlePosition: '职称/职务',
          specialty: '从事专业',
          phone: userInfo.mobile,
          type: 1,
        }
        members.value = membersData
      }
    })
  }

  const handleAdd = () => {
    members.value.push({
      userId: '',
      name: '',
      unitDepartment: '',
      age: '',
      titlePosition: '',
      specialty: '',
      phone: '',
      type: 2,
    })
  }

  const getFormData = () => {
    if (!leader.value[0].userId) {
      $baseMessage('请填写完整的项目研究人员组织', 'error')
      return false
    }
    for (let i = 0; i < leader.value.length; i++) {
      if (!leader.value[i].userId) {
        $baseMessage('请填写完整的项目研究人员组织', 'error')
        return false
      }
    }
    for (let i = 0; i < members.value.length; i++) {
      if (!members.value[i].userId) {
        $baseMessage('请填写完整的项目研究人员组织', 'error')
        return false
      }
    }
    return { mainMembers: [...leader.value, ...members.value] }
  }

  const setFormData = ({ mainMembers }) => {
    leader.value = mainMembers.filter((item) => item.type == 1)
    members.value = mainMembers.filter((item) => item.type == 2)
  }

  defineExpose({ getFormData, setFormData })

  getUserList()
</script>

<style lang="scss" scoped></style>
